<template>
	<skeleton v-if="!isLoading"></skeleton>
	<view v-else class="content">
		
		<!-- <image :src="staticUrl + '/image/communtiy/advert1.png'" style="width: 717rpx;height: 192rpx;" @click="toShopping()"></image> -->
		<!-- 签到区域 ..  -->
		<!-- <view class="signInView">
			<view class="signInViewTitle">
				<view class="signInViewTitleL">
					<view class="line"></view>
					<text>签到得爱豆</text>
				</view>
				<image v-if="isSignIn" :src="staticUrl + '/image/communtiy/icon_signIn.png'" style="width: 180rpx;height: 64rpx;margin-right: 38rpx;" @click="SignIn()"></image>
				<image v-else :src="staticUrl + '/image/communtiy/icon_signIn_selected.png'" style="width: 180rpx;height: 64rpx;margin-right: 38rpx;" @click="alreadySignIn()"></image>
			</view>
			<view class="aiDouView">	
				<view class="aiDouItem ML48">
					<image v-if="signInDay < 1" :src="staticUrl + '/image/mine/mask/icon_signIn1_no.png'"></image>
					<image class="signed" v-if="signInDay >= 1" :src="staticUrl + '/image/mine/mask/icon_signIn1.png'"></image>
					<text v-if="signInDay < 1" style="color: #808080;">一天</text>
					<text v-if="signInDay >= 1" style="color: #FF8E08;">一天</text>
				</view>
				<view class="aiDouItem">
					<image v-if="signInDay < 2" :src="staticUrl + '/image/mine/mask/icon_signIn1_no.png'"></image>
					<image class="signed" v-if="signInDay >= 2" :src="staticUrl + '/image/mine/mask/icon_signIn1.png'"></image>
					<text v-if="signInDay < 2" style="color: #808080;">二天</text>
					<text v-if="signInDay >= 2" style="color: #FF8E08;">二天</text>
				</view>
				<view class="aiDouItem">
					<image v-if="signInDay < 3" :src="staticUrl + '/image/mine/mask/icon_signIn1_no.png'"></image>
					<image v-if="signInDay >= 3" :src="staticUrl + '/image/mine/mask/icon_signIn1.png'"></image>
					<text v-if="signInDay < 3" style="color: #808080;">三天</text>
					<text v-if="signInDay >= 3" style="color: #FF8E08;">三天</text>
				</view>
				<view class="aiDouItem">
					<image v-if="signInDay < 4" :src="staticUrl + '/image/mine/mask/icon_signIn2_no.png'"></image>
					<image v-if="signInDay >= 4" :src="staticUrl + '/image/mine/mask/icon_signIn2.png'"></image>
					<text v-if="signInDay < 4" style="color: #808080;">四天</text>
					<text v-if="signInDay >= 4" style="color: #FF8E08;">四天</text>
				</view>
				<view class="aiDouItem">
					<image v-if="signInDay < 5" :src="staticUrl + '/image/mine/mask/icon_signIn1_no.png'"></image>
					<image v-if="signInDay >= 5" :src="staticUrl + '/image/mine/mask/icon_signIn1.png'"></image>
					<text v-if="signInDay < 5" style="color: #808080;">五天</text>
					<text v-if="signInDay >= 5" style="color: #FF8E08;">五天</text>
				</view>
				<view class="aiDouItem">
					<image v-if="signInDay < 6" :src="staticUrl + '/image/mine/mask/icon_signIn1_no.png'"></image>
					<image v-if="signInDay >= 6" :src="staticUrl + '/image/mine/mask/icon_signIn1.png'"></image>
					<text v-if="signInDay < 6" style="color: #808080;">六天</text>
					<text v-if="signInDay >= 6" style="color: #FF8E08;">六天</text>
				</view>
				<view class="aiDouItem MR48">
					<image v-if="signInDay < 7" :src="staticUrl + '/image/mine/mask/icon_signIn3_no.png'"></image>
					<image v-if="signInDay >= 7" :src="staticUrl + '/image/mine/mask/icon_signIn3.png'"></image>
					<text v-if="signInDay < 7" style="color: #808080;">七天</text>
					<text v-if="signInDay >= 7" style="color: #FF8E08;">七天</text>
				</view>
			</view>
		</view> -->
		<!-- 新闻资讯  区域 -->
		<view class="newsInfoView">
			<view class="signInViewTitle">
				<view class="signInViewTitleL">
					<view class="line"></view>
					<text>新闻资讯</text>
				</view>
				<text class="more" @click="newsMore()">更多</text>
			</view>
			<!-- 新闻 首页列表 3条 -->
			<view class="newsItem" v-for="(item, index) in newsList" :key="index" @click="toNewsDetail(index)">
				<image :src="item.image" style="width: 150rpx;height: 122rpx;margin-left: 39rpx;"></image>
				<view class="newsItem_R">
					<text v-if="item.title.length < 25" class="newsItem_Des">{{ item.title }}</text>
					<text v-else class="newsItem_Des">{{ item.title.slice(0,22)+'...'}}</text>
					<text class="newsItem_Date">{{ item.publishDate.slice(0,10)}}</text>
				</view>
			</view>
		</view>
		<!-- 健康动态区域 healthy dynamic-->
		<view class="healthyDynamicView">
			<view class="signInViewTitle">
				<view class="signInViewTitleL">
					<view class="line"></view>
					<text>健康动态</text>
				</view>
			</view>
			<!-- 健康动态 正文区域  for循环-->
			<view class="healthyDynamicContent" v-for="(item, index) in HealthyDynamic" :key="index"
				@click="toHealthyDynamic(index)">
				<view class="healthyDynamicHead">
					<text>{{item.title}}</text>
				</view>
				<!-- 文章 article -->
				<view style="margin-left: 47rpx;margin-top: 38rpx;">
					<text v-if="item.description.length > 50"
						class="healthyDynamic_article">{{item.description.slice(0,50)}}</text>
					<text v-else class="healthyDynamic_article">{{item.description}}</text>
					<text class="LookDetailText">查看详情</text>
				</view>
				<!-- 图片区域 -->
				<view style="margin-top: 31rpx;margin-left: 55rpx;">
					<uni-grid :column="3" :showBorder="false" :highlight="false" :square="false">
						<uni-grid-item v-for="(item1, index1) in ImgList[index]" :key="index1">
							<image :src="item1" style="width: 192rpx;height: 192rpx;margin-top: 10rpx;"></image>
						</uni-grid-item>
					</uni-grid>
				</view>
				<!-- 文章发布时间 -->
				<view class="DynamicDate">
					<text>{{item.publishTime}}</text>
				</view>
				<!-- 分割线 -->
				<view v-if="HealthyDynamic.length-1 != index" class="partingLine"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/api/login';
	import uitl from '../../utils/utils.js';
	import skeleton from '../../components/skeleton/skeleton_square.vue'
	export default {
		components: {
			skeleton
		},
		data() {
			return {
				staticUrl: this.$config.StaticUrl,
				isLoading: false,
				userId: '',
				isSignIn: true, //是否可以签到
				signInDay: 0, //签到天数
				// 新闻数组
				newsList: [],
				// 健康动态 文章列表
				HealthyDynamic: [],
				ImgList: [],
				isRefresh: 0, //是否刷新成功
				innerAudioContext: null,
			};
		},
		onLoad() {
			console.log('onload...');
			let userId = this.$store.state.userInfo.currentUser.userId;
			this.getMainDetail();
			this.getContent(0, 4); //资讯
			this.getContentDetails(0, 3); //动态
		},
		/* 下拉刷新 */
		onPullDownRefresh() {
			this.ImgList = [];
			// 重新加载文章
			this.getContent(0, 4);
			this.getContentDetails(0, 15);
			this.getMainDetail();
			if (this.isRefresh == 3) {
				this.isRefresh = 0;
				uni.stopPullDownRefresh();
			} else {
				let T = setTimeout(function() {
					uni.showToast({
						title: '刷新失败,请重试！',
						icon: 'loading',
					});
					uni.stopPullDownRefresh();
					clearTimeout(T);
					this.isRefresh = 0;
				}, 2000)
			}
		},
		methods: {
			// 获取签到信息
			getMainDetail() {
				let that = this;
				let data = {
					userId: that.$store.state.userInfo.currentUser.userId,
					action: 'getState'
				};
				api.userTask(data).then(function(res) {
					// console.log(res.data);
					if (res.data.code == 2000) {
						that.isSignIn = res.data.data.userSignIn.canSignIn;
						that.signInDay = res.data.data.userSignIn.userSignRecord.length;
						that.isRefresh++;
					}
				}).catch(function(error) {
					console.log('getuserTask fail', error);
				});
			},
			// 提交签到
			SignInDetail() {
				let that = this;
				let data = {
					userId: that.$store.state.userInfo.currentUser.userId,
					action: 'userDailySignIn',
					params: 1
				};
				api.userDailySignIn(data).then(function(res) {
					console.log(res);
					if (res.data.code == 2000) {
						uni.$emit('updatePurseInfo', {});
						uni.showToast({
							title: '签到成功!',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: '签到失败!',
							icon: 'loading'
						});
					}
				}).catch(function(error) {
					console.log('userDailySignIn fail', error);
				});
			},
			/*  新闻资讯*/
			getContent(startWith, moveLength) {
				let that = this;
				let data = {
					userId: that.$store.state.userInfo.currentUser.userId,
					action: "getContent",
					params: {
						channelName: "新闻资讯",
						startWith: startWith,
						moveLength: moveLength
					}
				};
				api.getContent(data).then(function(res) {
					// console.log('getContent success',res);
					if (res.data.code == 2000) {
						that.newsList = res.data.data.Content;
						that.isRefresh++;
					}
				}).catch(function(error) {
					console.log('getContent fail', error);
				});
			},
			// 健康动态 getTexture
			getContentDetails(startWith, moveLength) {
				let that = this;
				let data = {
					userId: that.$store.state.userInfo.currentUser.userId,
					action: "getContent",
					params: {
						channelName: "健康动态",
						startWith: startWith,
						moveLength: moveLength
					}
				};
				api.getContent(data).then(function(res) {
					// console.log('getContentDetails success',res);
					if (res.data.code == 2000) {
						that.ImgList = new Array(moveLength);
						that.isLoading = true
						that.isRefresh++;
						that.HealthyDynamic = res.data.data.Content;
						// 将html中的图片提取出来
						res.data.data.Content.forEach((item, index) => {
							that.getHtml(item.accessUrl, index);
						});
					}
				}).catch(function(error) {
					console.log('getContentDetails fail', error);
				});
			},
			getHtml(url, index) {
				let that = this;
				uni.request({
					url: url,
					method: 'GET',
					success: res => {
						// 在此处将image标签的src提取出来
						let imgsrc = uitl.getImgSrc(res.data);
						that.ImgList.splice(index, 1, imgsrc);
						// console.log(that.ImgList);
					},
					fail: (res) => {
						console.log(res);
					}
				});
			},
			//跳转到商城
			toShopping() {
				// console.log('00000');
				// let that = this;
				// let data = {
				// 	userId:that.$store.state.userInfo.currentUser.userId,
				// 	action:"getVoiceWithFileUrl",
				// 	params: {
				// 	    adjustScore: 90,
				// 	    userId: that.$store.state.userInfo.currentUser.userId,
				// 	    maxVascularAge: 30,
				// 	    deleted: 56781378,
				// 	    minVascularAge: 25,
				// 	    heartBeat: 80,
				// 	    hardScore: 80,
				// 	    reportId: 23,
				// 	    brainHealthScore: 90,
				// 	    synScore: 95
				// 	}
				// }; 
				// console.log(data);
				// api.getVoiceWithFileUrl(data).then(function(res) {
				// 	console.log('getVoiceWithFileUrl success',res);
				// 	that.innerAudioContext = uni.createInnerAudioContext();
				// 	that.innerAudioContext.loop = false;
				// 	that.innerAudioContext.src = res.data.data.voice;
				// 	that.innerAudioContext.play();
				// }).catch(function(error) {
				// 	console.log('getVoiceWithFileUrl fail', error);
				// });
			},
			//新闻资讯的更多
			newsMore() {
				uni.navigateTo({
					url: 'newsInfo/newsInfo'
				});
			},
			// 查看新闻资讯具体文章
			toNewsDetail(index) {
				let that = this;
				uni.navigateTo({
					url: 'contentDetail/contentDetail?url=' + that.newsList[index].accessUrl
				});
			},
			toHealthyDynamic(index) {
				let that = this;
				uni.navigateTo({
					url: 'contentDetail/contentDetail?url=' + that.HealthyDynamic[index].accessUrl
				});
			},
			//签到...
			SignIn() {
				this.$utils.throttle(() => {
					this.signInDay++;
					this.isSignIn = false;
					this.SignInDetail();
				}, 500)
			},
			alreadySignIn() {
				uni.showToast({
					title: '请勿重复签到!',
					icon: 'loading'
				});
			}
		}
	};
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.signInView {
		margin-top: 38rpx;
		width: 700rpx;
		height: 369rpx;
		border-radius: 15px;
		background-color: #ffffff;
	}

	.signInViewTitle {
		margin-top: 43rpx;
		margin-bottom: 67rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.signInViewTitleL {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.line {
		margin-left: 40rpx;
		width: 8rpx;
		height: 36rpx;
		border-radius: 15px;
		background-color: #0659c7;
	}

	.signInViewTitleL text {
		margin-left: 19rpx;
		font-size: 40rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #333333;
	}

	.aiDouView {
		margin-top: 59rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.aiDouItem {
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.signed {
		animation: rotate .5s ease;
	}

	@keyframes rotate {
		from {
			transform: rotateY(0deg);
		}

		to {
			transform: rotateY(360deg);
		}
	}

	.ML48 {
		margin-left: 48rpx;
	}

	.MR48 {
		margin-right: 48rpx;
	}

	.aiDouView image {
		width: 76rpx;
		height: 111rpx;
	}

	.aiDouView text {
		margin-top: 15rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #ff8e08;
	}

	/* 新闻资讯 */
	.newsInfoView {
		margin-top: 36rpx;
		width: 700rpx;
		height: 840rpx;
		border-radius: 15px;
		background-color: #ffffff;
	}

	.more {
		margin-right: 38rpx;
		font-size: 36rpx;
		font-family: Source Han Sans SC;
		font-weight: normal;
		color: #b3b3b3;
	}

	/* 新闻列表 s */
	.newsItem {
		margin-top: 50rpx;
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.newsItem_R {
		width: 435rpx;
		height: 122rpx;
		margin-left: 32rpx;
		margin-right: 44rpx;
		position: relative;
		/* background-color: #01B09A; */
	}

	.newsItem_Des {
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #333333;
	}

	.newsItem_Date {
		position: absolute;
		right: 0;
		bottom: 1rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #999999;
	}

	/* 健康动态区域 */
	.healthyDynamicView {
		padding-bottom: 98rpx;
		margin-top: 40rpx;
		margin-bottom: 78rpx;
		width: 700rpx;
		height: auto;
		border-radius: 15px;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.healthyDynamicContent {
		/* margin-top: 17rpx; */
		width: 100%;
		height: 100%;
	}

	.healthyDynamicHead {
		/* width: 100%; */
		margin-left: 47rpx;
	}

	.healthyDynamicHead text {
		font-size: 34rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #333333;
	}

	.healthyDynamicHeadL {
		margin-left: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.healthyDynamicHeadLText {
		margin-left: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
	}

	.healthyDynamicHeadLTextT1 {
		font-size: 34rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #333333;
	}

	.healthyDynamicHeadLTextT2 {
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: normal;
		color: #333333;
	}

	.healthyDynamicDate {
		margin-right: 40rpx;
		font-size: 28rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #666666;
		align-self: flex-start;
	}

	.healthyDynamic_article {
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #333333;
	}

	.LookDetailText {
		font-size: 34rpx;
		font-weight: normal;
		color: #0659c7;
	}

	.DynamicDate {
		margin-left: 57rpx;
		margin-top: 35rpx;
	}

	.DynamicDate text {
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: normal;
		color: #666666;
	}

	.partingLine {
		margin: 65rpx auto 58rpx;
		width: 600rpx;
		height: 2rpx;
		background-color: #f2f2f2;
	}
</style>